<!DOCTYPE html>
<html lang="zxx">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>

    <!-- Fav Icons -->
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">

</head>

<body>
<header class="main-header">
    <div class="container">
        <div class="header-inner">
            <div class="logo">
                <a href="index.html"><img src="assets/img/logo.png" alt="Main Logo"></a>
            </div>

            <div class="categories">
                <button><i class="flaticon-list"></i>
                    <span>Categories</span></button>
                <ul>
                    <li><a href="shop.html"><i class="flaticon-apple"></i> Fruits and Vegetables</a></li>
                    <li><a href="shop.html"><i class="flaticon-chicken-hand-drawn-outline"></i> Meat and Fish</a></li>
                    <li><a href="shop.html"><i class="flaticon-pressure-washer"></i> Home and Cleaning</a></li>
                    <li><a href="shop.html"><i class="flaticon-pest"></i> Pest Control</a></li>
                    <li><a href="shop.html"><i class="flaticon-stationery"></i> Office Products</a></li>
                    <li><a href="shop.html"><i class="flaticon-make-up"></i> Beauty Products</a></li>
                    <li><a href="shop.html"><i class="flaticon-first-aid-kit"></i> Health Products</a></li>
                    <li><a href="shop.html"><i class="flaticon-track"></i> Pet Care</a></li>
                    <li><a href="shop.html"><i class="flaticon-sketch"></i> Home Appliances</a></li>
                    <li><a href="shop.html"><i class="flaticon-baby-boy"></i> Baby Care</a></li>
                </ul>
            </div>

            <form action="#" class="menu-search">
                <select name="select-category">
                    <option value="option-1">All Categories</option>
                    <option value="option-2">Fruits and Vegetables</option>
                    <option value="option-3">Meat and Fish</option>
                    <option value="option-4">Home and Cleaning</option>
                    <option value="option-5">Pest Control</option>
                    <option value="option-6">Office Products</option>
                    <option value="option-7">Beauty Products</option>
                    <option value="option-8">Health Products</option>
                    <option value="option-9">Pet Care</option>
                    <option value="option-10">Home Appliances</option>
                    <option value="option-11">Baby Care</option>
                </select>
                <input type="search" placeholder="Search" required>
                <button type="submit">Search</button>
            </form>

            <div class="menu-collections">
                <div class="collection-item watch">
                    <i class="flaticon-heart"></i>
                    <div class="collection-inner">
                        <div class="alert single-collection">
                            <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                            <div class="collection-image">
                                <img src="assets/img/shop/cart-1.png" alt="">
                            </div>
                            <div class="collection-content">
                                <p>Danish Full Cream Milk</p>
                                <h6>$120.00</h6>
                            </div>
                        </div>
                        <div class="alert single-collection">
                            <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                            <div class="collection-image">
                                <img src="assets/img/shop/cart-2.png" alt="">
                            </div>
                            <div class="collection-content">
                                <p>Healthy Yellow Papaya</p>
                                <h6>$120.00</h6>
                            </div>
                        </div>
                        <div class="collection-btn">
                            <a href="cart.html" class="theme-btn bg-blue no-shadow mx-auto">Add to Cart</a>
                        </div>
                    </div>
                </div>
                <div class="collection-item cart">
                    <i class="flaticon-shopping-cart"></i>
                    <div class="collection-inner">
                        <div class="alert single-collection">
                            <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                            <div class="collection-image">
                                <img src="assets/img/shop/cart-1.png" alt="">
                            </div>
                            <div class="collection-content">
                                <p>Danish Full Cream Milk</p>
                                <h6>$120.00</h6>
                            </div>
                        </div>
                        <div class="alert single-collection">
                            <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                            <div class="collection-image">
                                <img src="assets/img/shop/cart-2.png" alt="">
                            </div>
                            <div class="collection-content">
                                <p>Healthy Yellow Papaya</p>
                                <h6>$120.00</h6>
                            </div>
                        </div>
                        <div class="collection-btn">
                            <a href="cart.html" class="theme-btn bg-blue no-shadow mr-10">View Cart</a>
                            <a href="checkout.html" class="theme-btn ml-auto no-shadow">Checkout</a>
                        </div>
                    </div>
                </div>
                <div class="collection-item profile">
                    <i class="flaticon-user-1"></i>
                    <div class="collection-inner">
                        <ul>
                            <li><a href="cart.html">Cart</a></li>
                            <li><a href="checkout.html">Checkout</a></li>
                            <li><a href="sign-in.html">Login</a></li>
                            <li><a href="sign-up.html">Sign Up</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="main-menu">
                <button><i class="flaticon-list-menu"></i></button>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li class="dropdown"><a href="#">Blog</a>
                        <ul>
                            <li><a href="blog.html">All Blog</a></li>
                            <li><a href="blog-details.html">Blog Details</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#">Shop</a>
                        <ul>
                            <li><a href="shop.html">Shop Page</a></li>
                            <li><a href="shop-details.html">Shop Details</a></li>
                            <li><a href="cart.html">Cart Page</a></li>
                            <li><a href="checkout.html">Checkout</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#">Pages</a>
                        <ul>
                            <li><a href="sign-in.html">Sign In</a></li>
                            <li><a href="sign-up.html">Sign Up</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
                <div class="menu-overlay"></div>
            </div>
        </div>
    </div>
    <div class="collection-close"></div>
</header>

<!--====================================================================
           Start Banner Section
       =====================================================================-->
<section class="banner-section" style="background-image:url(assets/img/banner.png);">
    <div class="container">
        <div class="banner-inner text-center">
            <h2 class="page-title">Shop</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Shop</li>
                </ol>
            </nav>
        </div>
    </div>
</section>
<!--====================================================================
    End Banner Section
=====================================================================-->

<div class="col-xl-9 col-lg-8">
    <div class="shop-items">

        <div class="search-result-header">
            <h5>Showing Result 12 of 89 Product</h5>
            <div class="sort-by">
                <h5>Sort:</h5>
                <select name="#">
                    <option value="value-1">ALL</option>
                    <option value="value-2">By Name</option>
                </select>
            </div>
        </div>
        <div class="row">

            <template  id="template_goods">
            <!--single Product   修改该商品-->
            <div class="col-xl-4 col-lg-6 col-sm-6">
                <div class="product">
                    <div class="product-img-wrap">
                        <img src="assets/img/product/product20.png" alt="img">
                        <!-- Button trigger modal -->
                        <button class="quick-view" type="button" data-toggle="modal" data-target="#quick-view">Quick View</button>
                    </div>

                    <div class="product-content-wrap">
                        <div class="product-content">
                            <p><a href="shop-details.html">商品名称：{gName} <br> 商品描述{gInfo}</a></p>
                        </div>
                        <div class="product-action">
                            <a href="#" class="add-to-btn small-btn">
                                <i class="flaticon-shopping-cart"></i>
                                <span>Add to Cart</span>
                                <h5 class="product-price">$120.00</h5>
                            </a>
                            <div class="add-wishlist">
                                <i class="fa fa-heart-o"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            </template>
        </div>
   </div>


    <script>
        //加载页面->显示商品列表
        $(function () {
            // loadUserInfo();
            loadGoodsList();
        });

        // function loadUserInfo() {
        //     let user = getLoginUser();
        //     $("#label_user_name").html(user.userName);
        // }

        //ajax 请求后台获取商品列表数据
        function loadGoodsList() {
            console.log("loadGoodsList");
            //发起ajax请求
            let url = "/goods/listAll?userId=1000&";
            // let params = {userId: 1000, userName: "jerry"};
            httpGetNoParams(url, function (data) {
                //业务处理
                renderingGoodsList(data);
            });
        }

        //渲染显示商品列表
        function renderingGoodsList(goodsList) {
            let templateGoodsHtml = $("#template_goods").html();
            let goodsListHtml = "";
            let tempGoodsHtml;
            //遍历商品列表
            $.each(goodsList, function (index, goods) {
                console.log(goods);
                //后台数据填充到模板中
                tempGoodsHtml = templateGoodsHtml.replace(/{gName}/g, goods.name);
                    // .replace(/{remark}/g, goods.remark)
                    // .replace(/{id}/g, goods.id)
                    // .replace(/{price}/g, goods.price);
                console.log(tempGoodsHtml);
                goodsListHtml += tempGoodsHtml;
            });
            //拼接商品展示html
            //html 填充到页面当中
            $("#div_goods_list").html(goodsListHtml);
        }

    </script>

</body>
</html>